웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
React 앱에서 제공하는 API 중 리액트 요소를 검증하는 isValidElement() API에 대하여 알아봅니다.
리액트 엘리먼트를 검증하고 확인하기 위해서 다음의 API를 사용할 수 있습니다.
React.isValidElement(target)
React API 중 하나인 isValidElement()는 엘리먼트를 인자로 받아 대상 객체가 React 엘리먼트인지를 검증한 후 Boolean 값으로 true 또는 false를 반환하게 됩니다.
@ 언제 isValidElement()를 사용할까요?
컴포넌트를 통하거나 API 등을 사용해 전달 받은 엘리먼트 요소가 있다고 생각해봅니다. 이 때 전달 받은 엘리먼트를 현재의 컴포넌트에 추가해야 할 경우가 있다면? 리액트 요소인지의 여부를 판단하고 append 하기 위해 isValidElement()를 사용할 수 있습니다.
결과가 true인 경우 정상적으로 사용할 수 있는 리액트 요소임을 검증할 수 있을 것입니다.
! React API isValidElement() 예제 코드 보기
간단한 예제 코드를 알아봅니다.
출력 결과는 각각 true, false입니다. AComponent의 경우 true이므로 현재 앱, 컴포넌트에 추가하는 등 사용할 수 있겠죠.
@ this.props.children으로 자식 요소를 전달 받는 경우
컴포넌트 사이에 엘리먼트를 전달 받는 다면? 이때 isValidElement()를 사용해 true인 경우에만 화면에 렌더링 하도록 아래와 같이 코드를 작성하는 것도 가능합니다.
만약 false 값을 반환하는 경우 렌더링 하지 않으며 에러가 발생하는 것을 미리 방지할 수도 있겠지요.
여기까지 React API 중 하나인 isValidElement()에 대하여 알아보았습니다.
! React API isValidElement()
리액트 엘리먼트를 검증하고 확인하기 위해서 다음의 API를 사용할 수 있습니다.
React.isValidElement(target)
React API 중 하나인 isValidElement()는 엘리먼트를 인자로 받아 대상 객체가 React 엘리먼트인지를 검증한 후 Boolean 값으로 true 또는 false를 반환하게 됩니다.
@ 언제 isValidElement()를 사용할까요?
컴포넌트를 통하거나 API 등을 사용해 전달 받은 엘리먼트 요소가 있다고 생각해봅니다. 이 때 전달 받은 엘리먼트를 현재의 컴포넌트에 추가해야 할 경우가 있다면? 리액트 요소인지의 여부를 판단하고 append 하기 위해 isValidElement()를 사용할 수 있습니다.
결과가 true인 경우 정상적으로 사용할 수 있는 리액트 요소임을 검증할 수 있을 것입니다.
! React API isValidElement() 예제 코드 보기
간단한 예제 코드를 알아봅니다.const AComponent = <h2>Webisfree.com</h2>;
const getTitle = () => <h2>Webisfree.com</h2>;
React.isValidElement(AComponent);
// true
React.isValidElement(getTitle);
// false
const getTitle = () => <h2>Webisfree.com</h2>;
React.isValidElement(AComponent);
// true
React.isValidElement(getTitle);
// false
출력 결과는 각각 true, false입니다. AComponent의 경우 true이므로 현재 앱, 컴포넌트에 추가하는 등 사용할 수 있겠죠.
@ this.props.children으로 자식 요소를 전달 받는 경우
컴포넌트 사이에 엘리먼트를 전달 받는 다면? 이때 isValidElement()를 사용해 true인 경우에만 화면에 렌더링 하도록 아래와 같이 코드를 작성하는 것도 가능합니다.
<div>
{ React.isValidElement(props.children) && props.children }
</div>
{ React.isValidElement(props.children) && props.children }
</div>
만약 false 값을 반환하는 경우 렌더링 하지 않으며 에러가 발생하는 것을 미리 방지할 수도 있겠지요.
여기까지 React API 중 하나인 isValidElement()에 대하여 알아보았습니다.
아래의 글도 찾고 계시지 않나요?